window.onload = function () {
    // 顶部的通栏 滚动的效果
    headerScroll();

    // 倒计时的效果
    cutDownTime();

    // 轮播图的效果
    banner();
}

//顶部通栏透明度的效果
function headerScroll() {
    var nav = document.querySelector('.jd_nav');
    var header = document.querySelector('.jd_header');
    //刚开始设置默认header头部透明度为0
    header.style.backgroundColor = 'rgba(201, 21, 35,0)';

    //top是当前的标签对的头部距离屏幕顶部的距离
    var nav_top = nav.offsetTop;
    //height是当前元素标签自己本身的高度
    var nav_height = nav.offsetHeight;

    var maxHeight = nav_top + nav_height;

    //给window设置onscroll事件
    window.onscroll = function () {
        var scrollLength = window.document.body.scrollTop;
        // console.log(scrollLength);
        var percent = scrollLength / maxHeight;
        if(percent > 1) {
            percent = 1;
        }
        // console.log(percent);
        header.style.backgroundColor = 'rgba(201, 21, 35,'+ percent +')'
    }

}

//倒计时效果
function cutDownTime() {
    var liArr = document.querySelectorAll('.main_content:nth-child(1) .content_top li');
    var totalSecond = 3*60*60;
    //因为默认每次开启都是少1秒直接多加1秒
    totalSecond++
    console.log(liArr);

    //TODO 要开启定时器，否则循环没有作用，在界面上面显示
    var interval = setInterval(function () {
        totalSecond--;

        if(totalSecond <= 0) {
            clearInterval(interval)
            console.log("倒计时结束了")
            return;
        }
        var hour = Math.floor(totalSecond/3600);
        var min = Math.floor(totalSecond%3600/60);
        var second = totalSecond%60;

        // console.log('hour'+hour+'min'+min+'second'+second);

        liArr[0].innerHTML = Math.floor(hour/10);
        liArr[1].innerHTML = hour%10;

        liArr[3].innerHTML = Math.floor(min/10);
        liArr[4].innerHTML = min%10;

        liArr[6].innerHTML = Math.floor(second/10);
        liArr[7].innerHTML = second%10;
    },1000)
}

//轮播图的效果
function banner() {
    //记录body屏幕的宽度
    var bodyWidth = window.document.body.offsetWidth;

    var bannerImg = document.querySelector('.banner_images');
    var bannerIndexArr = document.querySelectorAll('.banner_index li');
    var index = 0;

    var timeId = setInterval(function () {
        index++;
        // if(index >= 9) {
        //     index = 0;
        // }
        bannerImg.style.transform = 'translateX('+ (index*-1*bodyWidth) +'px)';

        //先用循环将li中的数组样式清空，在给当前唯一的添加current样式
        // for(var i=0;i<8;i++){
        //     bannerIndexArr[i].className = '';
        // }
        // bannerIndexArr[index-1 === -1?7:index-1].className = 'current';

        //开启图片滑动的补间动画效果
        bannerImg.style.transition = 'all .3s';

    },1000);

    //过度结束事件 来处理index的值，同时必须加上webkit对新事件，webkitTransitionEnd过度结束事件
    bannerImg.addEventListener('webkitTransitionEnd',function () {
        //  如果 index 太大了
        if (index>8) {
            index = 1;

            // 关闭过渡
            moveUl.style.transition = '';

            // 瞬间 修改一下 ul 的位置
            moveUl.style.transform = 'translateX('+index*width*-1+'px)';
        }else if(index<1){
            // 跳到倒数第二张
            index= 8;

            // 关闭过渡
            moveUl.style.transition = '';

            // 瞬间 修改一下 ul 的位置
            moveUl.style.transform = 'translateX('+index*width*-1+'px)';
        }

        // 修改 索引li标签的 class
        for (var i = 0; i < bannerIndexArr.length; i++) {
            bannerIndexArr[i].className = '';
        }

        // 有一个 1的 差值
        bannerIndexArr[index-1].className = 'current';

    })

    //刚开始移动的x位置
    var startX = 0;

    //记录移动的值
    var moveX = 0;

    //记录每次松手后移动的距离
    var distance = 0;

    bannerImg.addEventListener('touchstart',function (event) {
        //按下的瞬间取消定时器的轮播
        clearInterval(timeId);
        //清除过度动画
        bannerImg.style.transition = '';
        //记录按下后的x位置
        startX = event.touches[0].clientX;
    })
    
    bannerImg.addEventListener('touchmove',function (event) {
        moveX = event.touches[0].clientX - startX;
        //跟着手指移动的距离移动相应的位置
        bannerImg.style.transform = 'translateX('+ (moveX + index*-1*bodyWidth) +'px)'
    })
    
    bannerImg.addEventListener('touchend',function (event) {
        //屏幕的三分之一的最大的偏移量，如果超过了最大的，就下一页，没超过就还是当前页
        var maxDistance = bodyWidth / 3;
        if(Math.abs(moveX) > maxDistance) {
            if(moveX < 0) {
                index++;
            }else {
                index--;
            }

            bannerImg.style.transform = 'translateX('+ (index*-1*bodyWidth) +'px)';
            //开启过度动画
            bannerImg.style.transition = 'all .3s';
        }else {
            bannerImg.style.transform = 'translateX('+ (index*-1*bodyWidth) +'px)';
            //开启过度动画
            bannerImg.style.transition = 'all .3s';
        }

        //开启定时器
        timeId = setInterval(function () {
            index++;
            // if(index >= 9) {
            //     index = 0;
            // }
            bannerImg.style.transform = 'translateX('+ (index*-1*bodyWidth) +'px)';

            //先用循环将li中的数组样式清空，在给当前唯一的添加current样式
            // for(var i=0;i<8;i++){
            //     bannerIndexArr[i].className = '';
            // }
            // bannerIndexArr[index-1 === -1?7:index-1].className = 'current';

            //开启图片滑动的补间动画效果
            bannerImg.style.transition = 'all .3s';

        },1000);
    })
}